<template>
    <div>
     <r-tab></r-tab>
    <div class="memSer"  ref="clientHeight">      
      <div class="memDown">
          <div class="memDownContent" ref="downMgt" :style="{'margin-top':downMgt}">
              <div class="memDownContentOne item mdcMgb"  
               :model="item.is_url"  
               @click="toDetail(item.id)"              
               v-if="isIf" ref="box1" :style="{'height':box1H}" 
               v-for="(item,index) in shops" :key="index">
                  <div class="disinb itemImg">
                      <img :src="item.img_url" alt="" ref="imgHead" style="{'height':imgH}">                      
                  </div>
                  <div class="disinb itemDown">
                      <h2>{{item.title}}</h2>                      
                      <span class="texts"> {{item.remark}}</span><br>
                      <span class="detail">详情&gt;&gt;</span>
                  </div>
              </div>
              <div class="line"></div>  
          </div>
            <!--<div class="boxDown">-->
                <!--<Page class="page" :total="dataCount" :page-size="pageSize" :current="current"-->
                <!--show-total simple @on-change="changepage" />-->
            <!--</div>-->
      </div>
    </div>
    </div>
</template>

<script>

import RTab from '../components/rTab'
export default {
  name: "memSer",
  components: {RTab},
  data() {
    return {
      isIf:true,
      clientHeight: "",
      imgH: "",
      downMgt: "",
      box1H: "",
      box2H: "",
      box3H: "",
      curHeight: "",
      memName: "李治廷",
      headImg: "",
      current: 1,
      totalProblemList: [],
      dataCount: 9,
      pageSize: 3,
      shops: [],
      perPage: ""
    };
  },
  created() {
    this.$axios({
      method:"post",
      url:"https://vip.gznewpark.com/dist/admin/public/index.php/wx/Shop/memberService"
    })
    .then(response=>{      
      this.totalProblemList=response.data.result;
      this.shops = this.totalProblemList.slice(0, 3);
      
      }
    ) 
  },
  mounted() {
    this.clientHeight = `${document.documentElement.clientHeight}`;
  },
  watch: {
    clientHeight: function() {
      this.changeBoxH(this.clientHeight);
    }
  },
  methods: {
    changeBoxH(clientHeight) {
      this.box1H = clientHeight * 26 / 100 + "px";
      this.downMgt = clientHeight * 1 / 50 + "px";
      //   this.$refs.box1.style.height = this.box1H;
      //   this.$refs.box2.style.height = this.box1H;
      //   this.$refs.box3.style.height = this.box1H;
      //   this.$refs.downMgt.style.height = this.downMgt;
    },
    changepage: function(page) {
      this.perPage = 3;
      var _start = this.perPage * page - this.perPage;
      var _end = this.perPage * page;
      this.shops = this.totalProblemList.slice(_start, _end);
    },
    toDetail:function(id){             
      this.$router.push({
        path: '/memDetail',
        query: {
          id: id
        }
      })
    }
  }
};
</script>

<style lang="scss">
    body{
        background-color: #f4f6fb!important;
    }
li {
  list-style: none;
}
.cb {
  clear: both;
}
.fl {
  float: left;
}
.disinb {
  display: inline-block;
}
@media screen and (max-width: 359px) {
  .fcolor {
    color: orange;
  }
  .memSer {
    box-sizing: border-box;
    padding-left: 3%;
    padding-right: 3%;
    .memDown {
      .line {
        width: 100%;
        height: 0.05rem;
        background-color: #fff;
        margin-bottom: 0.3rem;
      }
      .memDownContent {
        .item {
          box-sizing: border-box;
          background-color: #fff;
          color: black;
          border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
          // height: 8.4rem;
          overflow: hidden;
          padding: 0.8rem 0.8rem 0.8rem 0.8rem;
          .itemImg {
            width: 40%;
            height: 100%;
            overflow: hidden;
            float: left;
            border-radius: 1rem 1rem 1rem 1rem;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .itemDown {
            width: 60%;
            height: 100%;
            float: right;
            position: relative;
            text-align: left;
            padding-left: 0.5rem;
            h2 {
              font-size: 0.97rem;
              padding: 0.5rem 0 0.2rem 0;
            }
            .texts {
              display: inline-block;
              font-size: 0.7rem;
              color: #b3b3b3;
              overflow: hidden;
              -webkit-line-clamp: 3;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
            }
            .detail {
              color: #f29f9f;
              position: absolute;
              right: 0.5rem;
              bottom: 0.3rem;
            }
          }
        }
        .mdcMgb {
          margin-bottom: 0.3rem;
        }
      }
      .boxDown {
        // position: fixed;
        // left: 28%;
        // bottom: 0.6rem;
      }
    }
  }
}
@media screen and (min-width: 360px) and (max-width: 410px) {
  .fcolor {
    color: blue;
  }
  .memSer {
    box-sizing: border-box;
    padding-left: 3%;
    padding-right: 3%;
    .memDown {
      .line {
        width: 100%;
        height: 0.05rem;
        background-color: #fff;
        margin-bottom: 0.3rem;
      }
      .memDownContent {
        .item {
          box-sizing: border-box;
          background-color: #fff;
          color: black;
          border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
          // height: 8.4rem;
          overflow: hidden;
          padding: 0.8rem 0.8rem 0.8rem 0.8rem;
          .itemImg {
            width: 48%;
            height: 100%;
            overflow: hidden;
            float: left;
            border-radius: 1rem 1rem 1rem 1rem;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .itemDown {
            width: 52%;
            height: 100%;
            float: right;
            position: relative;
            text-align: left;
            padding-left: 0.5rem;
            h2 {
              font-size: 0.97rem;
              padding: 0.5rem 0 0.2rem 0;
            }
            .texts {
              display: inline-block;
              font-size: 0.7rem;
              color: #b3b3b3;
              overflow: hidden;
              -webkit-line-clamp: 3;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
            }
            .detail {
              color: #f29f9f;
              position: absolute;
              right: 0.5rem;
              bottom: 0.5rem;
            }
          }
        }
        .mdcMgb {
          margin-bottom: 0.3rem;
        }
      }
      .boxDown {
        // position: fixed;
        // left: 30%;
        // bottom: 1rem;
      }
    }
  }
}
@media screen and (min-width: 411px) {
  .fcolor {
    color: red;
  }
  .memSer {
    box-sizing: border-box;
    padding-left: 3%;
    padding-right: 3%;
    .memDown {
      .line {
        width: 100%;
        height: 0.1rem;
        background-color: #fff;
        margin-bottom: 0.5rem;
      }
      .memDownContent {
        .item {
          box-sizing: border-box;
          background-color: #fff;
          color: black;

          height: 11rem;
          overflow: hidden;
          border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
          padding: 1rem 1rem 1rem 1rem;
          .itemImg {
            width: 44%;
            height: 100%;
            overflow: hidden;
            float: left;
            border-radius: 1rem 1rem 1rem 1rem;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .itemDown {
            width: 56%;
            height: 100%;
            float: right;
            position: relative;
            text-align: left;
            padding-left: 1rem;
            h2 {
              padding: 0.2rem 0;
            }
            .texts {
              display: inline-block;
              color: #b3b3b3;
              overflow: hidden;
              -webkit-line-clamp: 4;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
            }
            .detail {
              color: #f29f9f;
              position: absolute;
              right: 1rem;
              bottom: 0.5rem;
            }
          }
        }
        .mdcMgb {
          margin-bottom: 0.5rem;
        }
      }
      .boxDown {
        // position: fixed;
        // left: 30%;
        // bottom: 1rem;
      }
    }
  }
}
</style>
